<template>
  <div class="onlineMessage">
    <styleConfig
            v-show="currentView === 'styleConfig'"
            :changeWindow="changeWindow"
            :scheduleEnable="scheduleEnable"
            @tellSave="tellSave"
            @backTop="backTop"
            :basicData="onlineMessage"
            @changeWin="changeWin"
            @editStyle="editStyle"
            @editInviteStyle="editInviteStyle"
            @saveConfig="saveConfig"
            ref="childBasic"
    ></styleConfig>
    <invite-box-style v-show="currentView === 'inviteBox'" :styleData="onlineMessage"  ref="inviteBoxStyle" @save="tellSave"></invite-box-style>
  </div>
</template>
<script>
  import styleConfig from './styleConfig'
  import inviteBoxStyle from './inviteBoxStyle.vue'
  import * as uuid from 'uuid'
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'ChannelSkillGroup',
    data () {
      return {
        onlineMessage: {},
        isEditWinStyle: false,
        changeWindow: 'pure',
        currentView: 'styleConfig',
        scheduleEnable: false
      }
    },
    props: {
      configMessage: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    components: {
      styleConfig,
      inviteBoxStyle
    },
    methods: {
      backToBasic () {
        this.currentView = 'styleConfig'
      },
      backTop () {
        if (this.currentView !== 'styleConfig') {
          this.$emit('getWebchatList')
          this.currentView = 'styleConfig'
        }
      },
      tellSave () {
        let childBasic = this.$refs.childBasic
        childBasic.saveConfig(childBasic.form)
      },
      editStyle (data) {
        this.changeWindow = data.changeWindow
        this.currentView = 'styleConfig'
        this.scheduleEnable = data.scheduleEnable
      },
      changeWin (data) {
        this.changeWindow = data.changeWindow
      },
      editInviteStyle () {
        this.currentView = 'inviteBox'
        this.$refs.inviteBoxStyle.initPreviewWidth()
        this.$emit('onlineMsgBre', this.$t('configLazyLoad.channel.inviteStyleConfig'))
      },
      // 接受basicSetting子组件传过来的数据，通过$ref获取styleConfig里面的信息
      // 进行判断、处理、保存
      saveConfig (dataObj) {
        let styleConfData = this.$refs.childBasic
        let basicData = dataObj.basicData
        let inviteBoxData = this.$refs.inviteBoxStyle.inviteBox
        console.log(inviteBoxData)
        let data = Object.assign({}, deepClone(basicData), deepClone(styleConfData.cssStyle))
        data = Object.assign({}, data, {inviteBoxData: deepClone(inviteBoxData)})
        // if (!data.companyName) {
        //   this.currentView = 'styleConfig'
        //   this.$message.error(this.$t('configLazyLoad.channel.inputName'))
        //   return
        // }
        if (data.advConfig && data.advConfig.windowType === 'common') {
          if (data.advConfig.advType === '1') {
            if (!data.advConfig.uploadRightAdvtImg) {
              this.currentView = 'styleConfig'
              this.$message.error(this.$t('configLazyLoad.channel.dockingError8'))
              return
            }
          } else if (data.advConfig.advType === '2') {
            if (!data.advConfig.uploadLeftAdvtImg || !data.advConfig.uploadRightAdvtImg) {
              this.currentView = 'styleConfig'
              this.$message.error(this.$t('configLazyLoad.channel.dockingError9'))
              return
            }
          } else if (data.advConfig.advType === '3') {
            if (!data.advConfig.uploadLeftAdvtImg) {
              this.currentView = 'styleConfig'
              this.$message.error(this.$t('configLazyLoad.channel.dockingError10'))
              return
            }
          }
        }

        data.platform = 'web'
        data.serviceStates = 1
        data.styleColor = data.styleColor.substring(1)
        if (data.companyLogo === data.companyLogoTest) {
          delete data.companyLogo
          delete data.companyLogoTest
          delete data.attachName
        } else {
          delete data.companyLogoTest
        }
        if (!styleConfData.boxShow) {
          window.alert(this.$t('configLazyLoad.channel.dockingError11'))
        }
        if (!basicData.scheduleEnable) {
          if (!styleConfData.showBtn) {
            window.alert(this.$t('configLazyLoad.channel.dockingError12'))
          }
        }
        if (data.isTurnHumanSessionForm && data.turnHumanSessionFormId === '') {
          this.$message.error(this.$t('configLazyLoad.channel.dockingError20'))
          return
        }
        if (data._id) {
          this.$store.dispatch('webUpdateWebchatCfg', data).then((res) => {
            if (res && res.success) {
              this.$message({
                message: this.$t('configLazyLoad.channel.dockingSucc2'),
                type: 'success'
              })
              this.$emit('getWebchatList')
            }
          })
        } else {
          data.accessId = uuid.v1()
          this.$store.dispatch('webAddWebchatCfg', data).then((res) => {
            if (res && res.success) {
              this.$message({
                message: this.$t('configLazyLoad.channel.dockingSucc3'),
                type: 'success'
              })
              this.$emit('getWebchatList', 'isAdd')
            }
          })
        }
        this.isEditWinStyle = false
      }
    },
    // 监测configMessage 确保这个数据是保持最新的
    watch: {
      configMessage (val) {
        this.currentView = 'styleConfig'
        this.onlineMessage = val
      }
    },
    mounted () {
      this.currentView = 'styleConfig'
    },
    beforeMount () {
      this.isEditWinStyle = false
      this.onlineMessage = this.configMessage
    }
  }
</script>
<style lang="stylus" scoped>
</style>
